<template>
    <div class="cart-page">
        <div class="list" v-if="cartList&&cartList.length>0">
            <div class="item" v-for="(item,index) in cartList" :key="index">
                <div class="pic">
                    <img :src="item.pic" alt="">
                </div>
                <div class="text">
                    <div class="name">{{item.name}}</div>
                    <div class="price">单价：<span>￥{{item.price}}</span></div>
                    <div class="but">
                        <span @click="subItem(item.id)">-</span>
                        <span class="numm">{{item.cont}}</span>
                        <span @click="addItem(item.id)">+</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="nomore" v-else>
            <img src="../../assets/images/没有更多.png" alt="">
            <p>您的购物车还是空的哦！</p>
        </div>
    </div>
</template>

<script>
import {mapState,mapMutations} from "vuex"
import { log } from 'util'
export default {
    data(){
        return {

        }
    },
    methods:{
        ...mapMutations(["addItem","subItem"])
    },
    computed:{
        ...mapState(["cartList"])
    }
}
</script>
<style scoped>
    .list{
    margin: 0 20px;
    border-top: 1px solid #f5f5f5;
}
.list .item{
    display: flex;
    margin-top: 20px;
}
.list .item .pic{
    width: 25%;
    margin-right: 20px;
}
.list .item .pic img{
    width: 100%;
}
.list .item .text{
    width: 75%;
    position: relative;
}
.list .item .text .name{
    color: #333;
    white-space: nowrap;/* 文本不换行 */
    text-overflow: ellipsis;/* 文本溢出 显示省略号 */
    overflow: hidden;/* 溢出盒子,隐藏 */
}
.list .item .text .but{
    position: absolute;
    right: 10px;
    bottom: 10px;
    border:0;
    outline: none;
    padding: 3px 5px;
    display: flex;

}
.list .item .text .price span{
    color:orangered;
    font-weight: 700;
}
.but span{
    width: 20px;
    background-color: crimson;
    color: #fff;
    text-align: center;
}
.but .numm{
    background-color: #fff;
    border:1px solid crimson;
    color:#000
}
.nomore{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 180px;
    text-align: center;
}
</style>